import Vue from 'vue'

Vue.directive('focus', function (el, option) {
    let defClass = 'el-input', defTag = 'input';
    let value = option.value || true;
    if (typeof value === 'boolean')
        value = { cls: defClass, tag: defTag, foc: value };
    else
        value = { cls: value.cls || defClass, tag: value.tag || defTag, foc: value.foc || false };
    if (el.classList.contains(value.cls) && value.foc)
        el.getElementsByTagName(value.tag)[0].focus();
});

Vue.directive('hover', (el, option) => {
    let appendDom = el.childNodes[0];
    let dom = el.childNodes[1];
    let isActive = 'N';
    // console.log( 'el:', el )

    dom.onmousemove = function (e) {
        if (isActive === 'Y') {
            return
        } else {
            let targetDom = e.target.className === 'el-form-item__content'
                ? e.target
                : e.target.parentNode.parentNode
            let text = targetDom.innerText;

            let canvas = document.createElement("canvas");
            let context = canvas.getContext('2d');
            context.font = '12px "Microsoft YaHei"'
            let width = context.measureText(text).width;

            if (width > targetDom.clientWidth) {
                isActive = 'Y'
                appendDom.style.position = 'relative'
                appendDom.innerHTML = `${appendDom.innerText} <div class="tip">${text}</div>`
            }
        }
    }
    dom.onmouseleave = function (e) {
        if (isActive === 'Y') {
            let text = appendDom.childNodes[0].textContent
            appendDom.innerHTML = `${text}`
            isActive = 'N'
        }
    }
})